<template>
  <div class="content-box">
    <div class="top-content">
      <div class="top-content-box">
        <div class="top-content-tipsTitle">警告:</div>
        <div class="top-content-button">
          <el-select v-if="editStatus" class="el-select-padding" filterable :multiple="false" v-model="selectCity"
            placeholder="请选择需要添加的城市" @change="handelChange" @click="stopPropagation">
            <el-option v-for="item in allCityList" :key="item.cityId" :label="item.cityName" :value="item.cityName">
            </el-option>
          </el-select>
          <el-button class="button-padding" type="primary" @click="handleEdit">{{ editShowName }}</el-button>
          <el-button v-if="editStatus" class="button-padding" type="primary" @click="handleSave">保存</el-button>
        </div>
      </div>
      <div class="top-content-tips">
        设置城市排名请注意合理性，一旦修改将对职业大全PC端、小程序端都产生影响，修改保存后展示图表可能不会立即生效，数据会在整点时刻进行刷新，请前往职业大全PC端和小程序查看验证该职业薪酬数据展示是否正确！
      </div>
      <div class="bottom-box"></div>
    </div>
    <div class="bottom-content">
      <div class="content-header">
        <div class="city-header">城市名</div>
        <div class="rank-header">排名</div>
        <div class="sort-header">拖动排序</div>
      </div>
      <draggable v-if="editStatus" v-model="showCityList" @start="handlStartSort" @end="handleSortUpdate">
        <div class="content-item" v-for="(item, index) in showCityList" :key="index">
          <div class="city">{{ item.cityName }}</div>
          <div class="rank">{{ item.rank }}</div>
          <i class="el-icon-sort"></i>
        </div>
      </draggable>
      <div v-else class="bottom-content-box">
        <div class="content-item" v-for="(item, index) in showCityList" :key="index">
          <div class="city">{{ item.cityName }}</div>
          <div class="rank">{{ item.rank }}</div>
          <i class="el-icon-sort"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCityRankList, updateCityRank } from "@/api/salary";
import { reqStatisticBurry } from "@/api/home.js";
import draggable from "vuedraggable";
export default {
  name: "cityRankSetting",
  components: { draggable },
  data() {
    return {
      positionId: "",
      loading: false,
      editShowName: "编辑",
      editStatus: false,
      allCityList: [],
      showCityList: [],
      selectCity: "",
      sortIndex: null,
    };
  },
  created() {
    this.positionId = this.$route.query.id;
    this.getData();
  },
  methods: {
    stopPropagation(event) {
      // 阻止事件冒泡，防止el-option被el-dialog遮盖
      event.stopPropagation();
    },
    getData() {
      this.loading = true;
      let params = {
        ylPositionId: this.positionId,
        num: "300",
      };
      //   //console.log("params---getData--------->", params);
      getCityRankList(params)
        .then((res) => {
          this.loading = false;
          if (+res.code === 200) {
            this.allCityList = res.data;
            if (this.allCityList.length > 20) {
              this.showCityList = this.allCityList.slice(0, 20);
            }
            console.log(
              "getCityRankList--------->",
              this.showCityList,
              this.allCityList
            );
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleEdit() {
      if (this.editStatus) {
        this.$confirm("您修改的城市排名还未保存，收否现在退出编辑？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.editStatus = false;
          this.editShowName = "编辑";
          this.getData();
        });
      } else {
        this.editStatus = true;
        this.editShowName = "退出编辑";
      }
    },
    handleSave() {
      this.loading = true;
      let params = {
        ylPositionId: this.positionId,
        cityRankList: this.showCityList,
      };
      //   //console.log("params---getData--------->", params);
      updateCityRank(params)
        .then((res) => {
          this.loading = false;
          if (+res.code === 200) {
            this.editStatus = false;
            this.editShowName = "编辑";
            this.$message({
              message: res.status_desc,
              type: "success",
            });
            this.addLog();
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    addLog() {
      const params = {
        burryPage: "/#/position",
        eventType: "4",
        description: "城市薪酬模型编辑",
        ylPositionId: this.positionId,
      };
      reqStatisticBurry(params);
    },
    handelChange(value) {
      this.selectCity = value;
      const selectedOption = this.allCityList.find(
        (option) => option.cityName === this.selectCity
      );
      if (!this.showCityList.includes(selectedOption)) {
        this.showCityList.unshift(selectedOption);
        this.handleSortUpdate();
      } else {
        this.$message({
          message: "该城市已在排名列表中，无需再添加",
          type: "warning",
        });
      }

      //   //console.log("handelChange-------->", this.showCityList);
    },
    handleSortUpdate(e) {
      this.sortIndex = null;
      //console.log("handleSortUpdate--------->", this.showCityList);
      this.showCityList.forEach((item, index) => {
        item.rank = index + 1;
      });
    },
    handlStartSort(e) {
      //console.log("handlStartSort--------->", e);
      this.sortIndex = e.rank;
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  display: block;
  padding: 14px 14px 14px 14px;
  background: #fff;

  .top-content {
    width: 100%;
    //   height: 100px;
    .top-content-box {
      display: flex;
      height: 60px;
      padding: auto 20px;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      .top-content-tipsTitle {
        font-size: 24px;
        font-weight: bold;
        color: #ea0d0d;
      }
      .top-content-button {
        display: flex;

        .button-padding {
          padding-right: 20px;
        }
        .el-select-padding {
          margin-right: 20px;
          width: 200px;
        }
      }
    }
    .top-content-tips {
      color: #555;
      font-size: 14px;
      padding: 10px 0px;
      // height: 60px;
      line-height: 30px;
    }
    .right-box {
      background-color: rgb(206, 24, 124);
    }
  }

  .bottom-content {
    display: block;
    width: 100%;
    height: 520px;
    overflow-y: auto;
    // overflow: hidden;
    .content-header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60px;
      //   border-top: 1px solid #dcdfe6 !important;
      border-bottom: 1px solid #dcdfe6 !important;
      background-color: #f5f5f5;
      .city-header {
        width: 200px;
        padding-left: 24px;
      }
      .rank-header {
        width: 50px;
        text-align: center;
      }
      .sort-header {
        width: 300px;
        text-align: center;
      }
    }
    .content-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60px;
      //   border-top: 1px solid #dcdfe6 !important;
      border-bottom: 1px solid #dcdfe6 !important;
      .city {
        width: 200px;
        padding-left: 24px;
      }
      .rank {
        width: 50px;
        text-align: center;
      }
    }
    .isStartSort {
      background-color: #dcdfe6;
    }
  }
}
::v-deep .el-icon-sort {
  width: 300px;
  text-align: center;
}
::v-deep .el-select .el-input__inner {
  height: 40px;
}
::v-deep .el-select-dropdown__item.selected {
  color: #1890ff;
  font-weight: 700;
}
</style>
